<template>
  <div>
    <basic-container-one>
      <vue-element-loading :active="isActive" spinner="bar-fade-scale" color="#409eff" background-color="rgba(255,255,255,0.2)"/>
      <el-form :inline="true" :model="formInline" >
        <div style="margin-top: 22px">
          <el-form-item>
            <el-select v-model="formInline.gameFlName" filterable clearable placeholder="游戏大类目">
              <el-option
                v-for="item in gameFllist"
                :key="item.gameName"
                :label="item.gameName"
                :value="item.gameName"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="formInline.gameName" filterable clearable placeholder="游戏名称">
              <el-option
                v-for="item in gamelist"
                :key="item.gameName"
                :label="item.gameName"
                :value="item.gameName"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="time"
              clearable
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="queryFunc">查询</el-button>
            <el-button icon="el-icon-download" type="primary" @click="handleExport"   >下载</el-button>
          </el-form-item>
        </div>
      </el-form>
    </basic-container-one>
    <basic-container>
      <div style="margin-top: 20px">
        <el-table
          :data="dailyStatisticsList"
          stripe
          ref="el-table"
          style="width: 100%">
          <el-table-column
            prop="gameName"
            label="游戏名称">
          </el-table-column>
          <el-table-column
            prop="platformName"
            label="平台">
          </el-table-column>

          <el-table-column
            prop="scPayAmountTotal"
            label="首充收款">
          </el-table-column>
          <el-table-column
            prop="scPlatformCurrencyTotal"
            label="首充拨币">
          </el-table-column>
          <el-table-column
            prop="xcPayAmountTotal"
            label="续充收款">
          </el-table-column>
          <el-table-column
            prop="xcPlatformCurrencyTotal"
            label="续充拨币">
          </el-table-column>
          <el-table-column
            prop="profitSc"
            label="首充比例">
          </el-table-column>
          <el-table-column
            prop="scCb"
            label="首充成本">
            <template slot-scope="scope">
                <span
                  class="skucost-pruice">{{ (Number(scope.row.scCb)).toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="profitXc"
            label="续充比例">
          </el-table-column>
          <el-table-column
            prop="xcCb"
            label="续充成本">
            <template slot-scope="scope">
                <span
                  class="skucost-pruice">{{ (Number(scope.row.xcCb)).toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="profitBd"
            label="首充补点">
          </el-table-column>
          <el-table-column
            prop="bdJe"
            label="补点金额">
            <template slot-scope="scope">
                <span
                  class="skucost-pruice">{{ (Number(scope.row.bdJe)).toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="scLr"
            label="首充利润">
            <template slot-scope="scope">
                <span
                  class="skucost-pruice">{{ (Number(scope.row.scLr)).toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="xcLr"
            label="续充利润">
            <template slot-scope="scope">
                <span
                  class="skucost-pruice">{{ (Number(scope.row.xcLr)).toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="hjLr"
            label="合计毛利">
            <template slot-scope="scope">
                <span
                  class="skucost-pruice">{{ (Number(scope.row.hjLr)).toFixed(2) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="block" style="margin-top: 20px;">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.current"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </div>

    </basic-container>
  </div>
</template>

<script>
import {mapGetters} from "vuex";

import {queryGamesQr, queryPageSpendQrGamesProfitFx, queryFlGamesQr} from "@/api/system/details";
import moment from "moment";
import {cloneObj, parseParam} from '@/util/util'
import {getToken} from "@/util/auth";
import VueElementLoading from 'vue-element-loading'

export default {
  name: "day",
  data() {
    return {
      isActive: false,
      gamelist:[],
      gameFllist:[],
      formInline: {
        gameName: '',
        gameFlName:'',
      },
      page: {
        current: 1,
        size: 10,
        total: 0,
      },
      dailyStatisticsList: [],
      checked: false,
      isshowtrue: false,
      ischange: true,
      time: [new Date(new Date(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7)).setHours(0, 0, 0, 0)),
        new Date(new Date().setHours(23, 59, 59, 0))],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }

  },
  components: {
    VueElementLoading
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  mounted() {
    this.loadGames()
    this.refreshTable()
  },


  methods: {
    handleExport() {
      this.$confirm("是否导出数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        var forming={};
        forming = cloneObj(this.formInline)
        if (this.isNotEmpty(this.time)) {
          forming.startTime = this.time[0].getTime()
          forming.endTime = this.time[1].getTime()
        }
        window.location.href = `/api/blade-details/spend/export-spendqrGamesProfitFx?blade-auth=${getToken()}&${parseParam(forming)}`;

      });
    },

    isNotEmpty(arr) {
      return arr != null && arr.length !== 0
    },
    loadGames() {
      queryFlGamesQr().then(res => {
        this.gameFllist = res.data.data
      })
      queryGamesQr().then(res => {
        this.gamelist = res.data.data
      })
    },

    /**
     * 搜索按钮
     */
    queryFunc() {
      this.refreshTable()
    },

    refreshTable() {
      this.isActive = true
      this.getPageSpendQrGamesProfit()
    },

    getPageSpendQrGamesProfit() {
      let startTime;
      let endTime;
      if (this.isNotEmpty(this.time)) {
        startTime = this.time[0].getTime()
        endTime = this.time[1].getTime()
      }
      queryPageSpendQrGamesProfitFx(this.formInline, this.page.current, this.page.size, startTime, endTime).then(res => {
        this.isActive = false
        let data = res.data.data
        this.dailyStatisticsList = data.records
        this.page.total = data.total
      })
    },
    handleSizeChange(val) {
      this.page.size = val
      this.refreshTable()
    },
    handleCurrentChange(val) {
      this.page.current = val
      this.refreshTable()
    },

  }
}
</script>

<style lang="scss">
.customView1{
  width: 40%;
  background-color: #FFFFFF !important;
}
</style>
